<template>
  <view class="page_diy_table page_payment_information_table" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
    <tn-nav-bar>缴费信息列表</tn-nav-bar>
    <view class="page-list" id="page_diy_table">
      <!-- 筛选模块(开始) -->
      <view class="search-wrap">
        <!-- 搜索栏 -->
        <uni-forms :modelValue="query" labelWidth="70px">
            <uni-forms-item label="学生姓名" name="student_name">
                <uni-easyinput type="text" v-model="query.student_name" placeholder="学生姓名" />
              </uni-forms-item>
                <uni-forms-item label="学生学号" name="student_id">
                <uni-easyinput type="text" v-model="query.student_id" placeholder="学生学号" />
              </uni-forms-item>
                      <uni-forms-item label="支付状态" name="pay_state">
              <uni-data-select placeholder="请选择支付状态"
                               v-model="query['pay_state']"
                               :localdata="list_pay_state"
              ></uni-data-select>
            </uni-forms-item>
        </uni-forms>
        <!-- /搜索栏 -->
        <view class="search-btn-wrap">
          <view class="me-btn btn-reset" @click="reset()"> 重置 </view>
          <view class="me-btn btn-search" @click="search_()"> 查询 </view>
        </view>
		<view class="toolbar">
						</view>
      </view>
      <!-- 列表 -->
      <view class="list-wrap-row">
        <view v-for="(o, i) in list" :key="i" class="list-item">
          <view class="item-row " v-if="1 && $check_field('get','student_name')">
            <view class="label" v-if="true">
              <span>学生姓名</span>
            </view>
              <view class="value">
              <span>{{ o['student_name'] }}</span>
            </view>
            </view>
          <view class="item-row " v-if="0 && $check_field('get','student_account')">
            <view class="label" v-if="true">
              <span>学生账户</span>
            </view>
              <view class="value">
              <span>{{ get_user_student_account(o['student_account']) }}</span>
            </view>
            </view>
          <view class="item-row " v-if="1 && $check_field('get','student_id')">
            <view class="label" v-if="true">
              <span>学生学号</span>
            </view>
              <view class="value">
              <span>{{ o['student_id'] }}</span>
            </view>
            </view>
          <view class="item-row " v-if="0 && $check_field('get','class_director')">
            <view class="label" v-if="true">
              <span>班级主任</span>
            </view>
              <view class="value">
              <span>{{ get_user_class_director(o['class_director']) }}</span>
            </view>
            </view>
          <view class="item-row " v-if="0 && $check_field('get','payment_type')">
            <view class="label" v-if="true">
              <span>缴费类型</span>
            </view>
              <view class="value">
              <span>{{ o['payment_type'] }}</span>
            </view>
            </view>
          <view class="item-row " v-if="0 && $check_field('get','payment_amount')">
            <view class="label" v-if="true">
              <span>缴费金额</span>
            </view>
              <view class="value">
              <span>{{ o['payment_amount'] }}</span>
            </view>
            </view>
          <view class="item-row " v-if="0 && $check_field('get','cost_details')">
            <view class="label" v-if="true">
              <span>费用详情</span>
            </view>
              <view class="value">
              <span>{{ o['cost_details'] }}</span>
            </view>
            </view>
          <view class="content">
          </view>
          <view class="operate-bar">
            <view width="100%" class="me-btn btn-delete" @click="delInfo(i)"
                  v-if="$check_action('/payment_information/table', 'del') || $check_action('/payment_information/view', 'del')">
              删除
            </view>
            <view width="100%" class="me-btn btn-info" @click="$navTo('/pagesC/payment_information/view?' + field + '=' + o[field])"
                  v-if="$check_action('/payment_information/table', 'set') || $check_action('/payment_information/view', 'set') || $check_action('/payment_information/view', 'get')">
              详情
            </view>
              <view width="100%"
                    @click="goto_pay(o)"
                    v-if="o.pay_state === '未支付' && $check_pay('/payment_information/table')"
                    class="me-btn btn-pay">支付</view>
          </view>
        </view>
      </view>
      <!-- /列表 -->
      <!-- 分页器 -->
      <uni-pagination
        class="pager"
        show-icon="true"
        :total="count"
        :pageSize="query.size"
        :current="query.page"
        @change="page_change"
      ></uni-pagination>
      <!-- /分页器 -->
      <view class="pay-model" v-if="!!model">
        <view class="mask" @click="closemodel"></view>
        <view class="pay-model-inn">
          <view class="pay_tab">
            <view @click="choosepayway(idx)" v-for="(obj, idx) in payway" :key="idx" :class="['pay_tab_one', paywayact == idx ? 'pay_tab_one_act' : '']">{{ obj.name }}</view>
          </view>
          <view v-if="payway[paywayact].id !== 3" class="inclued_pay_image">
            <image mode="widthFix" class="pay_image" :src="payway[paywayact].url"></image>
          </view>
          <view v-else class="inclued_pay_image">
            <view>
              <view style="width: 80%; margin: 0 auto; margin-top: 30px" class="account">
                <view style="width: 80%; margin: 0 auto">
                  <view style="line-height: 40px">请输入网银账号：</view>
                </view>
                <view style="width: 80%; margin: 0 auto">
                  <input v-model="pay_obj.account" placeholder="请输入网银账号" />
                </view>
              </view>
              <view style="width: 80%; margin: 0 auto; margin-top: 20px" class="password">
                <view style="width: 80%; margin: 0 auto">
                  <view style="line-height: 40px">请输入支付密码，6位数字：</view>
                </view>
                <view style="width: 80%; margin: 0 auto">
                  <input placeholder="请输入密码" type="password" v-model="pay_obj.password" maxlength="6" />
                </view>
              </view>
            </view>
          </view>
          <view> <button class="me-btn" type="primary" @click="submit_pay()">确认支付</button></view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import mixin from '@/libs/mixins/page.js';

export default {
  mixins: [mixin],
  data() {
    return {
      // 获取数据地址
      url_get_list: '~/api/payment_information/get_list?like=0',
      url_del: '~/api/payment_information/del',

      // 字段ID
      field: 'payment_information_id',

      // 查询
      query: {
        size: 7,
        page: 1,
              student_name: "",
                      student_id: "",
                      "pay_state":"",
        login_time: '',
        create_time: '',
      },

      // 数据
      list: [],
                      // 用户列表
      list_user_student_account: [],
                        // 用户列表
      list_user_class_director: [],
                    list_pay_state: [
        { value: '', text: '全部' },
        { value: '未支付', text: '未支付' },
        { value: '已支付', text: '已支付' },
      ],
      model:false,
      paywayact:0,
      // 支付方式
      payway:[
        { name: '微信', url: '/static/img/wx.png', id: 1 },
        { name: '支付宝', url: '/static/img/aplipay.png', id: 2 },
        {
          name: '其他',
          url: 'https://dzgj.yuyuebus.com/static/front/dist/static/img/icon-question.png',
          id: 3,
        }
      ],
      pay_obj:{
        payActiveName:"微信",
        account:"",
        password:"",
        id:""
      },
    };
  },
  methods: {
    search_() {
      this.query.page = 1;
      this.get_list();
    },
    /**
     * 重置
     */
    reset: function reset() {
      uni.clear(this.query);
      uni.push(this.query, this.config);
      this.get_list();
    },
    get_list_before(param){
      var user_group = this.user.user_group;
      if(user_group != "管理员"){
          switch(user_group){
                              case "学生用户":
            param["student_account"] = this.user.user_id;
            break;
                                    case "教师用户":
            param["class_director"] = this.user.user_id;
            break;
                                                }
        }
      return param;
    },
    delInfo(v) {
      let _this = this;
      uni.showModal({
        title: '删除',
        content: '此操作将永久删除该文件, 是否继续?',
        success: function (res) {
          if (res.confirm) {
            let list = [v];
            _this.delAll(list);
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
                /**
     * 获取学生用户用户列表
     */
    async get_list_user_student_account() {
      var json = await this.$get("~/api/user/get_list?user_group=学生用户");
      if(json.result && json.result.list){
        this.list_user_student_account = json.result.list;
      }
      else if(json.error){
        console.error(json.error);
      }
    },

    get_user_student_account(id){
      let obj = this.list_user_student_account;
      let ret = "";
      for(let i=0;i<obj.length;i++){
        if(obj[i].user_id==id){
          ret = obj[i].nickname+"-"+obj[i].username;
        }
      }
      return ret;
    },
                  /**
     * 获取教师用户用户列表
     */
    async get_list_user_class_director() {
      var json = await this.$get("~/api/user/get_list?user_group=教师用户");
      if(json.result && json.result.list){
        this.list_user_class_director = json.result.list;
      }
      else if(json.error){
        console.error(json.error);
      }
    },

    get_user_class_director(id){
      let obj = this.list_user_class_director;
      let ret = "";
      for(let i=0;i<obj.length;i++){
        if(obj[i].user_id==id){
          ret = obj[i].nickname+"-"+obj[i].username;
        }
      }
      return ret;
    },
                        /**
     * 打开支付
     */
    goto_pay(v) {
      //打开选择支付方式
      this.pay_obj.id = v.payment_information_id;
      this.model = true;
    },
    choosepayway(idx) {
      switch (idx) {
        case 0:
          this.pay_obj.payActiveName = '微信';
          break;
        case 1:
          this.pay_obj.payActiveName = '支付宝';
          break;
        case 2:
          this.pay_obj.payActiveName = '网银';
          break;
      }
      this.paywayact = idx;
    },
    closemodel() {
      //关闭选择支付方式
      this.model = false;
    },
    /**
     * 支付
     */
    submit_pay() {
      let _this = this;
      let url = this.$toUrl(
              this.query,
              '~/api/payment_information/set?payment_information_id=' + this.pay_obj.id
      );
      let param = { pay_state: '已支付', pay_type: this.pay_obj.payActiveName };
      this.$post(url, param, (res) => {
        if (res.result) {
          _this.$toast('支付成功');
          setTimeout(() => {
            _this.$nav('/pagesC/payment_information/table');
          }, 700);
        } else if (res.error) {
          _this.$toast(res.error.message);
          console.log(res.error);
        }
      });
    },
  },
  created() {
                this.get_list_user_student_account();
                  this.get_list_user_class_director();
                },
};
</script>

<style lang="scss" scoped>
  @import '@/styles/pagesC/index.scss';
</style>